<!-- env中间栏 -->

<template>
  <div class="content">
    <!-- 头部组件 -->
    <megaBox></megaBox>

    <!-- 内容部分 -->
    <div class="body">
      <!-- 温度监测表 -->
      <div>
        <dv-border-box-6 style="padding: 10px">
          <Echart :options="temp" height="365px" width="680px" />
        </dv-border-box-6>
      </div>

      <!-- 城市空气污染物比例占比 -->
      <div class="body_table1">
        <dv-border-box-6 style="padding: 10px;height: 455px;">
          <Echart
            :options="pollutant"
            height="450px"
            width="400px"
            style="margin: auto"
          />
        </dv-border-box-6>
      </div>

    </div>
  </div>
</template>

<script>
import Echart from "@/common/echart/index.vue";
import megaBox from "./megaBox.vue"
export default {
  components: { Echart,megaBox },
  data() {
    return {
      // 污染config
      pollutant: {
        title: {
          text: "主要污染物分布",
          left: "center",
          top: 15,
          textStyle: {
          color: "#fff",
          fontSize: 24,
          }
        },
        legend: {
          top: "90%",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 180],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 15, name: "SO2" },
              { value: 50, name: "PM2.5" },
              { value: 80, name: "PM10" },
              { value: 60, name: "NO2" },
              { value: 106, name: "O3" },
              { value: 90, name: "CO" },
            ],
          },
        ],
      },
      // 气温config
      temp: {
        title: {
          text: "气温分布图",
          left: "center",
          top: 20,
          textStyle: {
          color: "#fff",
          fontSize: 24,
          }
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["气温","湿度"],
          left: "center",
          top: 60,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          boundaryGap: true,
          data: ["02:00", "04:00", "06:00", "08:00", "10:00", "12:00","02:00", "14:00", "16:00", "18:00", "20:00", "22:00","24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "气温",
            type: "line",
            data: [10, 15, 20, 25, 30, 35,10, 15, 20, 25, 30, 35,10, 15, 20, 25, 30, 35],
            smooth: true,
          },
          {
            name: "湿度",
            type: "line",
            data: [60, 65, 70, 75, 80, 85,60, 65, 70, 75, 80, 85,60, 65, 70, 75, 80, 85],
            smooth: true,
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.content {
  width: 38%;
}
.body {
  margin-top: 10px;
}
.body_table1 {
  display: flex;
}

</style>
